<template>
  <div class="login_submit">
    <h2>登录</h2>
    <el-form
      status-icon
      label-width="100px"
      :model="dynamicValidateForm"
      class="demo-ruleForm"
      ref="dynamicValidateForm"
    >
      <p>电子邮件地址 *</p>
      <p>
        <el-form-item
          prop="email"
          label-width="0"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input
            v-model="dynamicValidateForm.email"
            placeholder="请输入邮箱账户,如:1234*@qq.com"
          ></el-input>
        </el-form-item>
      </p>
      <p>密码 *</p>
      <p>
        <el-form-item
          label-width="0"
          prop="pass"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 字符',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="password"
            v-model="dynamicValidateForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </p>
      <div class="login_box1">
        <a href="#" class="a_font">忘记密码?</a>
        <div>
          <el-button @click="resetForm('dynamicValidateForm')" round
            >重置</el-button
          >
          <el-button type="primary" round @click="loginVal">登录</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { login } from '@/api';
export default {
  name: 'login',
  data() {
    return {
      dynamicValidateForm: {
        email: '',
        pass: '',
      },
    };
  },
  methods: {
    async loginVal() {
      const res = await login({
        email: this.dynamicValidateForm.email,
        pwd: this.dynamicValidateForm.pass,
      });
      console.log(res);
      if (res.data.code == 1) {
        this.$store.commit('login/emailVal', {
          email: res.data.data.email,
          token: res.data.token,
        });
        this.$message({
          message: '登录成功',
          type: 'success',
        });
        setTimeout(() => {
          this.$router.push('/');
        }, 1000);
      } else {
        this.$message.error('邮箱或者密码不正确');
      }
    },
    resetForm(a) {
      this.$refs[a].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
button {
  font-weight: bold;
}
.login_submit {
  padding: 10px;
  box-sizing: border-box;
  .demo-ruleForm {
    padding: 20px;
    border: 1px solid #ebebeb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
  }
  .login_box1 {
    display: flex;
    justify-content: space-between;
    .a_font {
      font-size: 13px;
      color: #000;
      text-decoration: none;
      line-height: 39px;
    }
    div {
      .login_span1 {
        margin-left: 5px;
        margin-right: 15px;
      }
    }
  }
}
</style>
